
<template>
  <div style="display: flex">
    <div>
      <div>
        <el-select
          v-model="keywords"
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
          :loading="loading"
          :clearable="true"
          size="medium"
          @change="currentSelect"
          style="width: 200px;margin-bottom:10px;"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item"
            class="one-text"
          >
            <span style="float: left">{{ item.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              item.district
            }}</span>
          </el-option>
        </el-select>
      </div>
      <div id="container" class="container"></div>
    </div>
    <div class="info-box">
      <!-- 纬度：{{ form.lat }}
      <br />
      经度：{{ form.lng }} -->
      <p style="margin-left:5px">{{ form.address }}</p>
    <el-button style="font-size:20px" @click="selectAddr" type="primay" icon="el-icon-circle-check" size="mini"></el-button>
    <el-button v-if="false" style="font-size:20px" @click="currentLocation" icon="el-icon-aim" size="mini"></el-button>

    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  // 安全密钥
  securityJsCode: '7ad55897dbb2c1f0d1791fce6185fc97'
}
export default {
  // name: 'TestIndex',
  data () {
    return {
      // 地图实例
      map: null,
      // 标记点
      marker: '',
      // 地址逆解析
      geoCoder: null,
      // 搜索提示
      AutoComplete: null,
      // 搜索关键字
      keywords: '',
      // 位置信息
      form: {
        lng: '',
        lat: '',
        address: '',
        adcode: '' // 地区编码
      },
      // 搜索节流阀
      loading: false,
      // 搜索提示信息
      options: []
    }
  },
  methods: {
    // 获取地址存入
    selectAddr () {
      if (!this.form.address) return this.$message.info('请选择地址')
      this.$store.commit('selectLocation', JSON.parse(JSON.stringify(this.form)))
      this.keywords = ''

      this.form.address = ''
      // console.log('$store.state.tab.our_addr.my_addr', this.$store.state.tab.our_addr.my_addr)
    },
    initMap () {
      AMapLoader.load({
        // 你申请的Key
        key: '9563f23becba5fa66b64e41e5c8b80f5',
        version: '2.0',
        // 需要用到的插件
        plugins: ['AMap.Geocoder', 'AMap.AutoComplete', 'AMap.Geolocation']
      })
        .then((AMap) => {
          this.map = new AMap.Map('container', {
            viewMode: '3D', // 是否为3D地图模式
            zoom: 5, // 初始化地图级别
            center: [105.602725, 37.076636]
          })
          // 地址逆解析插件
          this.geoCoder = new AMap.Geocoder({
            city: '020', // 城市设为北京，默认：“全国”
            radius: 500 // 范围，默认：500
          })
          // 搜索提示插件
          this.AutoComplete = new AMap.AutoComplete({ city: '全国' })
          // 点击获取经纬度;
          this.map.on('click', (e) => {
            // 获取经纬度
            this.form.lng = e.lnglat.lng
            this.form.lat = e.lnglat.lat
            // 清除点
            this.removeMarker()
            // 标记点
            this.setMapMarker()
          })
        })
        .catch((err) => {
          // 错误
          console.log(err)
        })
    },
    // 标记点
    setMapMarker () {
      // 自动适应显示想显示的范围区域
      this.map.setFitView()
      this.marker = new window.AMap.Marker({
        map: this.map,
        position: [this.form.lng, this.form.lat]
      })
      // 逆解析地址
      this.toGeoCoder()
      this.map.setFitView()
      this.map.add(this.marker)
    },
    // 清除点
    removeMarker () {
      if (this.marker) {
        this.map.remove(this.marker)
      }
    },
    // 逆解析地址
    toGeoCoder () {
      const lnglat = [this.form.lng, this.form.lat]
      this.geoCoder.getAddress(lnglat, (status, result) => {
        if (status === 'complete' && result.regeocode) {
          this.form.address = result.regeocode.formattedAddress
        }
      })
    },
    // 搜索
    remoteMethod (query) {
      // console.log(query)
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.AutoComplete.search(query, (status, result) => {
            this.options = result.tips
          })
        }, 200)
      } else {
        this.options = []
      }
    },
    // 选中提示
    currentSelect (val) {
      // 清空时不执行后面代码
      if (!val) {
        return
      }
      this.form = {
        lng: val.location.lng,
        lat: val.location.lat,
        address: val.district + val.address,
        adcode: val.adcode
      }
      // 清除点
      this.removeMarker()
      // 标记点
      this.setMapMarker()
    }
    // ,
    // 定位按钮
    // currentLocation () {
    //   const _this = this
    //   const geolocation = new window.AMap.Geolocation({
    //     // 是否使用高精度定位，默认：true
    //     enableHighAccuracy: true,
    //     // 设置定位超时时间，默认：无穷大
    //     timeout: 10000,
    //     // 定位按钮的停靠位置的偏移量
    //     offset: [10, 20],
    //     //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    //     zoomToAccuracy: true,
    //     //  定位按钮的排放位置,  RB表示右下
    //     position: 'RB'
    //   })

    //   geolocation.getCurrentPosition(function (status, result) {
    //     if (status == 'complete') {
    //       onComplete(result)
    //     } else {
    //       onError(result)
    //     }
    //   })

    //   function onComplete (data) {
    //     console.log(data)
    //     _this.form.lat = data.position.lat
    //     _this.form.lng = data.position.lng
    //     console.log(_this.form)
    //     _this.setMapMarker()

    //     // data是具体的定位信息
    //   }

    //   function onError (data) {
    //     console.log(data)
    //     // 定位出错
    //   }
    // }
  },
  mounted () {
    this.initMap()
  }
}
</script>

<style>
.container {
  width: 500px;
  height: 380px;
}
</style>
